<template>
 
  <el-row :gutter="20" v-if="vod.name">
    <el-col :span="6">
      <img :src="vod.poster" :alt="vod.name" class="rounded-md shadow-2xl block">
    </el-col>
    <el-col :span="18">
      <p class="text-shadow-sm text-red-500 text-2xl mb-3 font-bold">{{ vod.name }}</p>
      <p class="mb-2 text-md">{{ vod.alias }}</p>
      <p class="mb-2 text-md">{{ vod.categories }}</p>
      <p class="mb-2 text-md">{{ vod.area }}</p>
      <p class="mb-2 text-md">{{ vod.director }}</p>
      <p class="mb-2 text-md">{{ vod.starring }}</p>
      <p class="mb-2 text-md">{{ vod.lang }}</p>
      <p class="mb-2 text-md">{{ vod.remark }}</p>
      <p class="mb-2 text-md">简介：{{ vod.introduction }}</p>
    </el-col>
  </el-row>
  <el-row justify="start" v-if="vod.name">
    <div 
      v-for="item in links" 
      :key="item" 
      @click="Play(item)"
      :class="[
        'm-2 py-2 px-3 border rounded-md border-gray-500 cursor-pointer transition hover:bg-dark-200 hover:text-light-900', 
        activePlay === item.split('$')[1] ? 'bg-dark-200 text-light-900': ''
      ]"
    >
      {{ item.split('$')[0] }}
    </div>
    <div class="m-4 p-2 rounded-md bg-gray-400 text-light-500">
      <p>提示: </p>
      内容收集于互联网主流视频网站, 仅供个人测试使用, 里面广告与作者无关, 一定不要相信, 请勿点击进行播放, 所有非正常操作与开发作者无关, 请大家多多支持正版。
    </div>
  </el-row>
  <div v-else class="w-2xl">
    <el-skeleton :rows="10" animated/>
  </div>
  <el-dialog
    v-model="playerVisible"
    :title="palyerTitle"
    :before-close="handleClose"
    :fullscreen="true"
  >
    <!-- <p>{{ activePlay }}</p> -->
    <!-- <div class="player" id="player-con"></div> -->
    <div class="m-1 p-2 rounded-md bg-red-400 text-light-500">
      内容收集于互联网主流视频网站, 仅供个人测试使用, 里面广告与作者无关, 一定不要相信, 请勿点击进行播放。
    </div>
    <videoPlay v-bind="videoPlayOption" />
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="handleClose">关闭</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { onMounted, ref, Ref } from 'vue';
import { LocationQueryValue, useRoute, useRouter } from 'vue-router'
import { storeToRefs } from 'pinia'
import { useMovieStore } from '@/store/index'
import { useId } from '@/hooks/useId'
import { ElMessage } from 'element-plus'
import 'vue3-video-play/dist/style.css'
import { videoPlay } from 'vue3-video-play'
// hook
const { getId, delId } = useId();
// store
const movieStore = useMovieStore()
// router
const router = useRouter()
const route = useRoute()
const { webUrl, webName } = storeToRefs(movieStore)
// payload
const getMovie = window.getMovie
const Aliplayer = window.Aliplayer

// 视频id
const movieId: Ref = ref('')
// 视频信息
const vod: Ref = ref({})
// 播放列表信息
const links: Ref = ref([])
// 当前播放
const activePlay: Ref = ref('')
// 视频弹窗显示
const playerVisible: Ref = ref(false)
// 播放名称
const palyerTitle: Ref = ref('')

const videoPlayOption = ref({})

onMounted(() => {
  console.log('route.query', route.query)
  if (route.query && route.query.log && route.query.id) {
    setInfo(route.query.id)
  } else {
    getInfo()
  }
})

// 1. 获取视频信息
const getInfo = () => {
  console.log('获取视频信息')
  movieId.value = getMovie({
    url: webUrl.value + route.query?.vodUrl,
    source: webName.value,
  })
  console.log(movieId.value);
  movieId.value ? setInfo(movieId.value) : ''
  // 删除搜索记录
  if(route.query.id && movieId.value) {
    delId(route.query.id)
  }
}

// 2. 设置视频详细内容
const setInfo = async (id: string | null | LocationQueryValue[]) => {
  console.log('设置视频详细内容')
  let res: any = await getId(id)
  console.log('res', res)
  if (res && res._id) {
    console.log('获取id 信息',res)
    vod.value = res
    if (res?.links) {
      links.value = res.links
    } else {
      delId(id)
    }
  } else {
    console.log('获取不到 id 信息')
    delId(id)
    ElMessage.error('获取数据失败,将返回到 主页 ')
    router.push({
      name: 'home'
    })
  }
}
// 3. 播放视频
const Play = (data: any) => {
  playerVisible.value = true
  palyerTitle.value = vod.value.name +' '+data.split('$')[0]
  activePlay.value = data.split('$')[1]
  videoPlayOption.value = {
    width: '100%', //播放器高度
    height: '450px', //播放器高度
    color: "#409eff", //主题色
    title: palyerTitle.value, //视频名称
    poster: vod.value.poster,
    src: activePlay.value, //视频源
    type: 'm3u8',
    muted: false, //静音
    speedRate: ["0.75", "1.0", "1.25", "1.5", "2.0"], //播放倍速
    autoPlay: true, //自动播放
    loop: false, //循环播放
    mirror: false, //镜像画面
    ligthOff: false,  //关灯模式
    volume: 0.5, //默认音量大小
    control: true, //是否显示控制器
  }
}

const handleClose = () => {
  playerVisible.value = false
  videoPlayOption.value = {}
}
</script>

<style>
.el-dialog__body {
  padding-top: 0;
  padding-bottom: 0;
}
</style>

